<template>
  <el-tooltip :content="ext == 'image' ? useName(name) : name">
    <div :class="ext == 'image' ? 'card' : 'other'" @click="$emit('next')">
      <div class="mask">
        <el-popconfirm
          title="确定要删除此图片吗?"
          @confirm="$emit('delete', useName(name).replace(`${this.bucketMap[this.$store.state.key]}:`, ''))"
          confirmButtonType="default"
          confirm-button-text="删除"
          cancel-button-text="取消"
        >
          <template #reference>
            <el-icon color="#fff">
              <Delete />
            </el-icon>
          </template>
        </el-popconfirm>
      </div>
      <el-image fit="fill" :src="useSrc(ext, src)" />
    </div>
  </el-tooltip>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import {
  Delete,
} from '@element-plus/icons-vue';
import { bucketMap } from '../config'

export default defineComponent({
  name: 'Card',
  emits: ['next', 'delete'],
  props: {
    src: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    ext: {
      type: String,
      default: 'image'
    }
  },
  components: {
    Delete
  },
  data() {
    return {
      bucketMap: bucketMap
    }
  },
  methods: {
    useSrc(ext, src) {
      // console.log('ext', src);
      switch (ext) {
        case 'image':
          return 'tmp/' + src.split('/').slice(3).join('/');
        default:
          return `../assets/${src}.svg`
      }
    },
    useName(name) {
      // console.log('name',name)
      // console.log('this.$route.params.id', this.$route.params.id);
      const bucketName = Array.isArray(this.$route.params.id) ? this.$route.params.id[0] : this.$route.params.id;
      return `${this.bucketMap[this.$store.state.key]}:${bucketName}/${name}`
    }
  }
})
</script>

<style lang="scss">
@import "../index.scss";

.card {
  width: 150px;
  height: 150px;
  border-radius: 4px;
  box-shadow: 0 0 10px #ccc;
  background-color: #fff;
  margin: 1rem;

  .mask {
    opacity: 0;

    .el-icon {
      position: absolute;
      margin-left: -0.5em;
      margin-top: -0.5em;
    }
  }

  .el-image {
    width: 100%;
    height: 100%;
  }
}

.card:hover {
  position: relative;
  .mask {
    opacity: 1;
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);

    .el-icon {
      position: absolute;
      left: 50%;
      top: 50%;
    }

    .el-icon:hover {
      color: red;
    }
  }
  transform: scale(1.05);
  transition: all ease-in-out 0.2s;
  cursor: pointer;
}

.other {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  .el-image {
    width: 80%;
  }
}
</style>
